﻿body, img, div, ul, li, button, a {
	padding: 0;
	margin: 0;
}

.backgraund-gradient() {
	background: #aaaaaa;
	background: -moz-linear-gradient(top, #aaaaaa 0%, #ffffff 40%, #ffffff 60%, #aaaaaa 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aaaaaa), color-stop(40%,#ffffff), color-stop(60%,#ffffff), color-stop(100%,#aaaaaa));
	background: -webkit-linear-gradient(top, #aaaaaa 0%,#ffffff 40%,#ffffff 60%,#aaaaaa 100%);
	background: -o-linear-gradient(top, #aaaaaa 0%,#ffffff 40%,#ffffff 60%,#aaaaaa 100%);
	background: -ms-linear-gradient(top, #aaaaaa 0%,#ffffff 40%,#ffffff 60%,#aaaaaa 100%);
	background: linear-gradient(to bottom, #aaaaaa 0%,#ffffff 40%,#ffffff 60%,#aaaaaa 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaaaaa', endColorstr='#aaaaaa',GradientType=0 );
}

@button-first-color: #5e5e5e;
@button-second-color: #353535; 

body {
	font-size: 18px;
	font-family: "trebuchet ms", helvetica, sans-serif;
	letter-spacing: -1px;

	nav {
		float: left;
		width: 100px;
		padding: 10px;

		ul {
			list-style-type: none;

			li {
				text-align: center;

				button {
					cursor: pointer;
					padding: 2px 5px;
					margin: 2px;
					.backgraund-gradient;
					width: 80px;
					color: #353535;
					border-style: solid;
					border-width: 2px;
					border-radius: 5px;
					border-top-color: @button-first-color;
					border-left-color: @button-first-color;
					border-right-color: @button-second-color;
					border-bottom-color: @button-second-color;

					&:hover {
						border-top-color: @button-second-color;
						border-left-color: @button-second-color;
						border-right-color: @button-first-color;
						border-bottom-color: @button-first-color;
					}
				}

				&:first-of-type {
					margin-bottom: 10px;
				}

				&:nth-of-type(2) {
					margin-bottom: 20px;
				}
			}
		}
	}

	div#wrapper {
		position: absolute;
		left: 110px;
	}
}
